<template>
  <div>
    <div class="top df jsb">
      <div :style="{width: 100/top.length + '%'}" class="t_item fs30 tc" :class="{active: act === index}" v-for='(item, index) in top' :key="index" @click="change(index)">{{item}}</div>
    </div>
    <div class="bot">
      <div v-if="act === 0">
        <div class="item" v-for='(item, index) in equ' :key='index' @click="linkDetail(item.id, item.name)">{{item.name}}</div>
      </div>
      <div  v-if="act === 1">
        <div class="item" v-for='(item, index) in fa' :key='index' @click="linkDetail(item.id, item.name)">{{item.name}}</div>
      </div>
      <div class="nodate fs30 tc" v-if ='(act === 0 && equ.length === 0) || (act === 1 && fa.length === 0)'>暂无数据</div>
    </div>
  </div>
</template>

<script>
import Collection from 'lodash/collection'
import { getstandards } from '@/api'
export default {
  components: {
  },
  data () {
    return {
      top: ['设备', '设施'],
      act: 0,
      equ: [],
      fa: []
    }
  },
  methods: {
    change (index) {
      this.act = index
    },
    linkDetail (id, text) {
      const url = `../process_detail/main?id=${id}&text=${text}`
      wx.navigateTo({url})
    }
  },
  async mounted () {
    let result = await getstandards()
    this.equ = Collection.filter(result.data, {is_sb: '0'})
    this.fa = Collection.filter(result.data, {is_sb: '1'})
  }
}
</script>
<style>
.top{position: fixed;width: 90%;top: 0;left: 0;border-bottom: 1rpx solid #eee;padding: 0 5%;z-index: 9;background: #fff}
.t_item{border-bottom: 6rpx solid transparent;height: 90rpx;line-height: 90rpx;font-size: 34rpx;color: #7d7e80}
.bot{padding: 0 5%;padding-top: 90rpx;}
.t_item.active{border-color: #2f74ff;color: #2f74ff}
.item{padding: 0 20rpx;border-bottom: 2rpx solid #eee;font-size: 30rpx;height: 90rpx;line-height: 90rpx;}
</style>
